import React, { Component, useEffect, useRef, useState } from "react";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import "./index.less";
let datalist = [
  //第一组 //整条数据需要带上render属性  里面多段的数据parent执行整条的id
  {
    id: 1,
    name: "小花",
    age: 18,
    render: "split",
    text: "任务一",
  },
  {
    id: 100,
    parent: 1,
    start_date: "19-06-2022",
    end_date: "20-06-2022",
    text: "玩游戏",
    color: "#F56C6C",
  },
  {
    id: 101,
    parent: 1,
    start_date: "19-06-2022",
    end_date: "26-06-2022",
    text: "事情一",
    color: "#67C23A",
  },

  //第二组
  {
    id: 2,
    name: "小草",
    age: 16,
    render: "split",
    text: "",
  },
  {
    id: 104,
    parent: 2,
    start_date: "19-06-2022",
    end_date: "20-06-2022",
    text: "玩游戏",
    color: "#E6A23C",
  },
  {
    id: 105,
    parent: 2,
    start_date: "19-06-2022",
    end_date: "20-05-2022",
    text: "事情四",
    color: "#909399",
  },
];

export default function HomePage() {
  const refs = useRef<any>(null);
  const [currentZoom, setCurrentZoom] = useState("Days");
  const init = () => {
    //鼠标移入展示信息
    gantt.plugins({
      tooltip: true,
      maker: true,
      zoom: true,
      grid_resize: true,
    });
    gantt.config.columns = [
      { name: "name", label: "名称", align: "center", width: 120 },
      { name: "age", label: "年龄", align: "center", width: 120 },
    ];
    let today = new Date(); // getEndOfDate 为获取今天结束时间的方法
    gantt.addMarker = (props) => {
      console.log(props, "props");
      return "today";
    };
    gantt.init(refs?.current);
    gantt.parse({ data: datalist });
  };
  // 自定义tooltip内容
  gantt.templates.tooltip_text = function (start: Date, end: Date, task: any) {
    const t = gantt;
    const output = `<b>里程碑：</b>${
      task.text
    }<br/><b>状态：</b><br/><b>计划开始时间：</b>${t.templates.tooltip_date_format(
      start
    )}<br/><b>计划结束时间：</b>${t.templates.tooltip_date_format(end)}`;
    return output;
  };
  // 添加tooltip
  gantt.attachEvent("onGanttReady", function () {
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport((gantt as any).$task_data);
  });
  gantt.templates.task_class = function (
    start: Date,
    end: Date,
    task: any
  ): string {
    console.log(task, "task", start, end);
    if (task.text == "玩游戏") {
      return "parent";
    } else if (task.text == "事情一") {
      return "one";
    }
  };

  // 突出周末颜色
  const disableHighlight = currentZoom === "Years" || currentZoom === "Months";
  (gantt.templates as any).timeline_cell_class = function (
    item: any,
    date: Date
  ): string {
    if (!disableHighlight && (date.getDay() === 0 || date.getDay() === 6)) {
      return "weekend";
    }
    return "";
  };

  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <div className="tool-bar">
        <div className="title">切换视图</div>
        <div className="bar"></div>
      </div>
      <div
        id="gantt"
        ref={(ref) => (refs.current = ref)}
        style={{ width: "100%", height: "100vh" }}
      ></div>
    </>
  );
}
